<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注意事项</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            padding: 50px;
            background-color: gray;
        }
        /*子元素从父级的content开始，不会占padding*/
        .insider{
            width: 100px;
            height: 100px;
            /*margin从父元素内容区边缘开始*/
            /*margin: 100px;*/
            /*margin-left设置成auto就是离左边能有多远就多远，right同理*/
            /*left,right都设置为auto就水平居中了,但是垂直方向不行*/
            /* margin-left: auto; */
            /* margin-right: auto; */
            /*上下是0，左右auto,就水平居中了,这个只能块元素，行内元素不行*/
            margin: 0 auto;
            background-color: green;
        }
        .box{width: 200px;height: 200px}
        .box1{background-color: skyblue}

        /*总结，上左margin影响自身，下右影响兄弟*/
        .box2 {
            background-color: orange;
            /*自己会被顶下来*/
            margin-top: 50px;
            /*下面的box3会被顶下去*/
            margin-bottom: 50px;
        }
        .box3{background-color: green}
        .second{margin-left: 50px;margin-right: 50px;}

        #d1{
            width: 400px;
            height: 400px;
            margin: 50px;
            background-color: deepskyblue;
        }
        .one{
            background-color: skyblue;
        }
        .two{
            background-color: green;
            /*行内元素上下margin设置了没效果,尽管浏览器调试时会显示*/
            margin-right: 50px;
            margin-left: 50px;

            margin-top: 50px;
        }
        .three{
            background-color: orange;
        }
    </style>
</head>
<body>
<img src="../../images/margin注意事项.png" style="width: 500px">
<hr>
<div class="outer">
    <div class="insider">

    </div>
</div>

<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>

<hr>
<img src="../../images/test1.png"><img class="second" src="../../images/test1.png"><img src="../../images/test1.png">

<div id="d1">
    我是一个块级元素
</div>
<div>我是一段文字</div>
<hr>
<span class="one">人之初</span><span class="two">性本善</span><span class="three">性相近</span>
</body>
</html>